<template>
    <div class="aside">
        <nav>
            <router-link to="/newAirSecurity/flyer">
                <Icon name="icon-home"/>
                飞手
            </router-link>
            <router-link to="/newAirSecurity/device">
                <Icon name="icon-shebei"/>
                设备
            </router-link>
        </nav>
    </div>
</template>

<script lang=ts>
  import Icon from '@/components/Icon.vue';

  export default {
    name: 'Aside',
    components: {Icon}
  };
</script>

<style scoped lang=scss>
    .aside {
        width: 100px;
        margin-top: 96px;
        background: rgb(47, 64, 80);
        padding: 32px 0;
        color: white;
        position: fixed;
        left: 0;
        bottom: 0;
        top: 0;

        nav {
            a {
                display: flex;
                flex-direction: column;
                align-items: center;

                &:nth-child(2) {
                    margin-top: 32px;
                }
            }

        }
    }
</style>